﻿<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:javascript="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>智能养老云平台-注册</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/favicon.ico}">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link th:href="@{/static/css/regist.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/static/plugins/layui/css/layui.css}">

    <style>
        .submit {
            width: 200px !important;
        }

        .must:after {
            content: "*";
            color: red;
        }

        .layui-form-item {
            margin-bottom: 30px !important;
        }

    </style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
    <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse " role="navigation"
         style="background: #4e97d9;line-height:60px;padding-left:30px;color:#fff;">
        <div class="navbar-header" style="font-size:20px">智能养老云平台</div>
    </nav>
    <div class="registMain">
        <!--  //机构注册  -->
        <div class="form-box">
            <p>
                <a class="title">养老机构账号注册</a>
                <span class="fr">已有账号，<a class="acolor" th:href="@{/login}">去登录</a></span>
            </p>
            <form class="layui-form" lay-filter="myform" th:action="@{/register/regist}" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label must">机构名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="orgName" id="orgName" required lay-verify="required|verifyExist"
                               placeholder="请输入机构名称(与许可证名称一致)" autocomplete="off" maxlength="50" class="layui-input">
                    </div>
                </div>
              <!--  <div class="layui-form-item">
                    <label class="layui-form-label must">机构类型</label>
                    <div class="layui-input-inline">
                        <select id="orgType" name="orgType" lay-filter="orgType" lay-verify="required">
                            <option value="1">普通机构</option>
                            <option value="2">连锁机构</option>
                            <option value="3">一证多地机构</option>
                            <option value="4">附属机构</option>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">附属机构：一地多证中的次要机构</div>
                </div>-->
                <div id="enterpriseWrap" style="display: none;">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="padding:0;width: 95px;">统一社会信用代码</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="orgType"   autocomplete="off" class="layui-input" value="1">
                            <input type="text" name="enterpriseCode" id="enterpriseCode" placeholder="请输入社会统一信用代码(非三证合一企业填写营业执照代码)" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">企业名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="enterpriseName" id="enterpriseName"
                                   placeholder="请输入企业名称(与营业执照名称一致)" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div id="minfeiWrap" style="display: none;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">证书代码</label>
                        <div class="layui-input-block">
                            <input type="text" name="minfeiCode" id="minfeiCode" required placeholder="请输入民办非企业单位证书代码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">单位名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="minfeiName" id="minfeiName" required
                                   placeholder="请输入单位名称(与证书中名称一致)" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label must">民政部门</label>
                    <div class="layui-input-block">
                        <select name="mzCode"  lay-verify="required">
                            <option></option>
                            <option th:each="mzDepartments: ${mzDepartments}" th:value="${mzDepartments.code}"
                                    th:text="${mzDepartments.departmentName}"></option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label must">手机号码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" id="phone" required maxlength="11" lay-verify="required|phone"
                               placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">将作为机构登录账号</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label must">短信验证码</label>
                    <div class="layui-input-inline">
                        <input type="number" name="smsCode" id="smsCode" required maxlength="6" lay-verify="required"
                               placeholder="请输入短信验证码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="padding-top: 0!important;">
                        <button type="button" id="getMsgCode" class="layui-btn layui-btn-normal">获取短信验证码<span></span>
                        </button>
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label must">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" id="password" name="password" maxlength="16" required
                               lay-verify="required|password" placeholder="请输入密码" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">由6-16位字母数字及_ $ ! ?组成</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label must">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" maxlength="16" required
                               lay-verify="required|equalToPassword" placeholder="确认密码" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">再次输入密码</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="margin-left: 63px;width: 400px;">
                        <input id="mainAcceptIpt" lay-verify="required|checkPrivacy" type="checkbox" checked="checked"
                               lay-ignore> 已阅读并同意
                        <a href="javascript:void(0)" id="privacy" target="_blank" style="color: #039;">《用户注册协议》</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="font-size: 12px;color:#b2b2b2;margin-top:0;padding-left:115px;">
                        公办机构请直接联系主管单位分配账号，无需注册
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal submit" lay-submit lay-filter="subBtn">立即注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div><!-- //main -->
    <div class="foot">
        <div class="copyRight color666"> &copy; 2018 智能养老云平台</div>
    </div><!-- //foot -->

</div><!-- //wrap -->
<script th:src="@{/static/plugins/jquery.js}"></script>
<script th:src="@{/static/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/static/plugins/layui/layui.js}"></script>
<script>
    layui.use(["form", "layer"], function () {
        var $ = layui.$,
            form = layui.form,
            layer = layui.layer;

        //获取短信验证码
        $("#getMsgCode").on('click', sendMsg);

        function sendMsg() {
            var $btn = $(this);
            $btn.off('click');
            var phone = $("#phone").val();
            if (!phone || phone.length != 11) {
                layer.msg('请输入正确手机号码', {
                    icon: 5
                });
                $btn.on('click', sendMsg);
            } else {
                $.ajax({
                    url: "/register/sendMsg",
                    data: {phone: phone},
                    type: "post",
                    dataType: "json",
                    success: function (rs) {
                        if (rs.code !== 200) {
                            layer.msg(rs.message, {icon: 2});
                            $btn.on('click', sendMsg);
                        } else {
                            //短信发送成功
                            $btn.addClass("layui-disabled");
                            var s = 59;
                            var timer = window.setInterval(function () {
                                $btn.find("span").text("(" + s-- + ")");
                                if (s <= 1) {
                                    window.clearInterval(timer);
                                    $btn.removeClass("layui-disabled");
                                    $btn.on('click', sendMsg);
                                    $btn.find("span").text("");
                                }
                            }, 1000);
                        }
                    }
                });
            }

        }

        //选择企业类型事件
        form.on('select(orgType)', function (data) {
            var val = data.value;
            if (2 === val) {
                $("#enterpriseWrap").show().find("input").attr("lay-verify", "required");
            } else {
                $("#enterpriseWrap").hide().find("input").removeAttr("lay-verify");
            }
            if (3 === val) {
                $("#minfeiWrap").show().find("input").attr("lay-verify", "required");
            } else {
                $("#minfeiWrap").hide().find("input").removeAttr("lay-verify");
            }
        });
        //输入企业 代码后去后台验证是否已经存在该企业
        $("#enterpriseCode").on("change", function () {
            var code = $(this).val();
            $.ajax({
                url: "/register/enterprise",
                data: {code: code},
                type: "get",
                dataType: "json",
                async: false,
                success: function (rs) {
                    if (rs.code == 200 && rs.data) {
                        $("#enterpriseName").val(rs.data.name).prop("readonly", true);
                        $("#enterpriseName").after('<input type="hidden" name="enterpriseId" value="' + rs.data.id + '">');
                    } else {
                        $("#enterpriseName").val("").removeProp("readonly");
                        $("#enterpriseName").next("input").remove();
                    }
                }
            });
        });

        //输入民非 代码后去后台验证是否已经存在该企业
        $("#minfeiCode").on("change", function () {
            var code = $(this).val();
            $.ajax({
                url: "/register/minfei",
                data: {code: code},
                type: "get",
                dataType: "json",
                async: false,
                success: function (rs) {
                    if (rs.code == 200 && rs.data) {
                        $("#minfeiName").val(rs.data.name).prop("readonly", true);
                        $("#minfeiName").after('<input type="hidden" name="minfeiId" value="' + rs.data.id + '">');
                    } else {
                        $("#minfeiName").val("").removeProp("readonly");
                        $("#minfeiName").next("input").remove();
                    }
                }
            });
        });

        //表单验证
        form.verify({
            password: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value === "" || value == null || value.length < 6 || value.length > 16) {
                    return '密码必须是6-16位';
                } else {
                    var pswd = /^[0-9a-zA-Z_$!?]{6,16}$/;
                    if (!pswd.test(value)) {
                        return "您输入的密码不符合规则，请从新输入"
                    }
                }
            },
            equalToPassword: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value !== $("#password").val()) {
                    return '两次密码输入不一致';
                }
            },
            checkPrivacy: function (value, item) {
                if (!$("#mainAcceptIpt").is(":checked")) {
                    return '必须同意相关协议！';
                }
                ;
            },

            //校验是该机构名称是否被注册
            verifyExist: function (value, item) {
                var msg = 200;
                $.ajax({
                    url: '/register/verifyExist',
                    type: "post",
                    dataType: "json",
                    data: {orgName: value},
                    async: false,
                    success: function (rs) {
                        if (rs.code !== 200) {
                            msg = rs.code;
                        }
                    },
                    error: function () {
                        layer.msg("请求失败", {icon: 2});
                    }
                });
                if (msg !== 200) {
                    return "该机构已经被注册，请核对后从新输入";
                }
            }

        });

        form.on('submit(subBtn)', function (data) {
            $.ajax({
                url: '/register/regist',
                type: "post",
                dataType: "json",
                data: data.field,
                success: function (rs) {
                    if (rs.code != 200) {
                        layer.msg(rs.message, {icon: 2});
                    } else {
                        location.href = "/register/success";
                    }
                },
                error: function () {
                    layer.msg("请求失败", {icon: 2});
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        $("#privacy").on('click', function () {
            layer.open({
                title: '养老用户注册协议和隐私政策'
                , area: ['500px', '300px']
                , type: 2
                , btn: ['确定'] //可以无限个按钮
                , content: '/register/privacy'
            })
        });

    });
</script>
</body>
</html>
